<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title id="title">聊天室</title>
    <style>
        .talk_con{
            width:600px;
            height:520px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .who_talk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .a_talk{
           margin:10px;
        }
        .a_talk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .b_talk{
            margin:10px;
            text-align:right;
        }
        .b_talk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
</head>
<body>
<div class="talk_con">
    <div id="room_name">聊天室</div>
    <div><span>在线人数: </span><span id="online_count">0</span></div>
    <div class="talk_show" id="words"></div>
    <div class="talk_input">
        <span class="who_talk" id="who_talk">11</span>
        <input type="text" class="talk_word" id="talk_word" onkeydown="sendMsgOnEnter(event)" />
        <input type="button" value="发送" class="talk_sub" onclick="sendMsg()">
    </div>
</div>
</body>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript">
    var nickname = decodeURIComponent(getSearchParam("nickname")).trim();
    document.getElementById("who_talk").innerHTML = nickname;

    function appendMsg(oNickname, content) {
        var wordsDiv = document.getElementById("words");
        var div = document.createElement("div");
        div.setAttribute("class", oNickname == nickname ? "b_talk" : "a_talk");
        var span = document.createElement("span");
        span.innerHTML = oNickname + ": " + content;
        div.append(span);
        wordsDiv.append(div);
        // 滚动到最底部
        wordsDiv.scrollTop = wordsDiv.scrollHeight;
    }

    var ws = new WebSocket("ws://localhost:8080/websocket-tomcat/chat/" + nickname);
    var interId = 0;
    //连接发生错误的回调方法
    ws.onerror = function(event){
        console.log("onerror:" + event);
    };
    //连接成功建立的回调方法
    ws.onopen = function(event){
        console.log("onopen:" + event);
        // 心跳
        interId = setInterval(function() {
            //ws.send('{"type":"2"}');
            ws.send('ping');
        }, 30000);
    }
    //接收到消息的回调方法
    ws.onmessage = function(event){
        console.log("onmessage:" + event.data);
        var data = JSON.parse(event.data);
        if ("0" == data.type) {
            appendMsg(data.nickname, data.content);
        } else if ("1" == data.type) {
            document.getElementById("online_count").innerHTML = data.content;
        }
    }
    //连接关闭的回调方法
    ws.onclose = function(event){
        console.log("onclose:" + event.code + ": " + event.reason);
        clearInterval(interId);
        if (event.code == 1008) {
            location.href = "./?error_msg=" + event.reason;
        }
    }

    function sendMsg() {
        if (all && all()) {
            return false;
        }
        var msg = document.getElementById("talk_word").value;
        if (msg == "" || msg.trim() == "") {
            return false;
        }
        var sendMsg = {"type": "0", "content": msg};
        ws.send(JSON.stringify(sendMsg));
        document.getElementById("talk_word").value = "";
    }

    function sendMsgOnEnter(event) {
        if (event.keyCode == 13){
            sendMsg();
        }
    }
</script>
</html>